<template>
  <div class="footer">
    <div class="shop">
        <div class="shop-goods">
          <a  @click="switchTo('/IntegralDetail')">
            <img src="../../assets/detail_1.jpg" alt="" />
            <div class="shop-goods-info">
              <p>妙莲天香 新款北欧不锈新款北欧不锈...</p>
              <p>价格：￥75.00</p>
              <p>会员价：<em>￥<i>45</i>.00 </em></p>
            </div>
          </a>
        </div>
        <div class="shop-goods">
          <a href="详情页面.html">
            <img src="../../assets/detail_1.jpg" alt="" />
            <div class="shop-goods-info">
              <p>妙莲天香 新款北欧不锈新款北欧不锈...</p>
              <p>价格：￥75.00</p>
              <p>会员价：<em>￥<i>45</i>.00 </em></p>
            </div>
          </a>
        </div>
        <div class="shop-goods">
          <a href="详情页面.html">
            <img src="../../assets/detail_1.jpg" alt="" />
            <div class="shop-goods-info">
              <p>妙莲天香 新款北欧不锈新款北欧不锈...</p>
              <p>价格：￥75.00</p>
              <p>会员价：<em>￥<i>45</i>.00 </em></p>
            </div>
          </a>
        </div>
        <div class="shop-goods">
          <a href="详情页面.html">
            <img src="../../assets/detail_1.jpg" alt="" />
            <div class="shop-goods-info">
              <p>妙莲天香 新款北欧不锈新款北欧不锈...</p>
              <p>价格：￥75.00</p>
              <p>会员价：<em>￥<i>45</i>.00 </em></p>
            </div>
          </a>
        </div>
        <div class="shop-goods">
          <a href="详情页面.html">
            <img src="../../assets/detail_1.jpg" alt="" />
            <div class="shop-goods-info">
              <p>妙莲天香 新款北欧不锈新款北欧不锈...</p>
              <p>价格：￥75.00</p>
              <p>会员价：<em>￥<i>45</i>.00 </em></p>
            </div>
          </a>
        </div>
        <div class="shop-goods">
          <a href="详情页面.html">
            <img src="../../assets/detail_1.jpg" alt="" />
            <div class="shop-goods-info">
              <p>妙莲天香 新款北欧不锈新款北欧不锈...</p>
              <p>价格：￥75.00</p>
              <p>会员价：<em>￥<i>45</i>.00 </em></p>
            </div>
          </a>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
     
    }
  },
  methods:{
    switchTo(path){
      // console.log(this.$router)
      this.$router.replace(path)
    }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shop{
	width:94%;
	display: inline-block;
	margin-left:3%;
}
.shop-goods{
	width:47%;
	float: left;
	background: #FFF;
	border-radius: 5px;
	overflow: hidden;
	margin-top:10px;
	padding-bottom: 10px;
}
.shop-goods img{
	width:100%;
	height:173px;
}
.shop-goods-info p:nth-child(1){
	width: 94%;
	margin: 0 auto;
	font-size: 13px;
	padding: 2px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 4px;
}
.shop-goods-info p:nth-child(2){
	width: 94%;
	margin: 0 auto;
	font-size:12px;
	color:#999;
}
.shop-goods-info p:nth-child(3){
	font-size:12px;
	color:#999;
	width: 94%;
	margin: 0 auto;
}
.shop-goods-info p:nth-child(3) em{
	color:#FC2847;
}
.shop-goods-info p:nth-child(3) em i{
	color:#FC2847;
	font-size:16px;
}
.shop .shop-goods:nth-child(odd){
    margin-right: 6%;
}
</style>
